<template>
	<LeftBox>
		<div class="head">
			<span class="groups">丰台站办xx班组秩序管理</span>
			<div class="time"><img src="@/assets/images/global/时间.png" alt="" class="icon" /> {{ date }} {{ time }}</div>
			<div class="btn" @click="historyType = historyType == '1' ? '' : '1'">
				{{ historyType == '1' ? '返回' : '消息管理' }}
			</div>
			<!-- <div class="btn" @click="historyType = historyType == '2' ? '' : '2'"> -->
			<!-- <div class="btn">
				{{ historyType == '2' ? '返回' : '信息共享' }}
			</div> -->
			<div class="btn" v-if="historyType == '2'">
				<label for="file">{{ '导入' }}</label>
				<input type="file" id="file" style="display: none" @change="importTable" />
			</div>
			<!-- <div class="btn" @click="isSendMessageShow = true">
				{{ '发送通知' }}
			</div> -->
		</div>
		<Message :info="gtMsgList" />
		<br /><br />
		<Message :info="dtMsgList" />
		<Teleport to="body">
			<SendMessage v-if="isSendMessageShow" @close="isSendMessageShow = false" />
		</Teleport>
	</LeftBox>
</template>
<script lang="ts" setup>
	import { ref, onMounted } from 'vue'
	import Message from './Message.vue'
	import { time, date } from '@/global'
	import { convertExcelToJson } from '@/utils/common'
	import { baseData } from './History'
	import { getMyMessage } from '@/api/train'
	import SendMessage from './SendMessage.vue'

	const isSendMessageShow = ref(false)
	const info = {
		title: '丰台停车场流量情况',
		user: '管理员',
		readedPerson: 5,
		mess: [
			`丰台火车站前停车场：<br/> P1车流量3371辆<br/> P2车流量1912辆 <br/><br/>丰台火车站后停车场 <br/>P1车流量3371辆<br/> P2车流量1912辆`,
		],
	}

  const gtMsgList = ref<any>({
    msgType: '国铁通知',
    createUserAccount: '',
    msgContent: ""
  });
  const dtMsgList = ref<any>({
    msgType: '地铁通知',
    createUserAccount: '',
    msgContent: ""
  });
	const msgList = ref([])
	const historyType = defineModel('historyType')

	const importTable = (event: any) => {
		const file = event.target.files[0]
		convertExcelToJson(file)
			.then((jsonString: any) => {
				console.log(jsonString)
				// 此处可以将 jsonString 赋值给 el-table 的 data
				baseData.value = jsonString.slice(1)
			})
			.catch((error: any) => {
				console.error('Error reading file:', error)
			})
	}

	onMounted(async () => {
    const userinfo = localStorage.getItem('userinfo');
    if (!userinfo) return;
		let params = {
			pageSize: 10,
			pageNum: 1,
      userId: JSON.parse(userinfo).userId,
		}
    gtMsgList.value.createUserAccount = JSON.parse(userinfo).username;
    dtMsgList.value.createUserAccount = JSON.parse(userinfo).username;
		await getMyMessage(params).then(msgRes => {
      // 1：国铁通知，2：地铁通知，3：通用通知，4：部门内部通知
			gtMsgList.value.msgContent = msgRes.data.records.filter((mItem: any) => {
				return mItem.msgType == "1"
			})?.[0]?.msg ?? "";
      dtMsgList.value.msgContent = msgRes.data.records.filter((mItem: any) => {
				return mItem.msgType == "2"
			})?.[0]?.msg ?? "";
		})
	})
</script>

<style lang="scss" scoped>
	.head {
		// width: 1236px;
		height: 96px;
		background-image: url(@/assets/images/global/消息-header.png);
		background-size: 100% 100%;
		margin-bottom: 10px;
		font-size: 36px;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	.btn {
		padding: 20px 20px;
		background-color: rgba(0, 142, 255, 1);
		cursor: pointer;
		border-radius: 10px;
		margin: 0 20px;
	}
	.time {
		width: 420px;
		margin: 0 50px;
	}
</style>
